<template>
    <d-aside class="content__menu">
        <d-menu :mode="'vertical'" router :default-select-keys="select" :open-keys="['/doc/about']" v-if="show">
            <template v-for="item in docTree" :key="item.path">
                <d-sub-menu 
                    v-if="item.children.length"
                    :title="item.meta.title"
                    :key="`/doc/${item.path}`"
                >
                    <template #icon>
                        <i class="icon-folder"></i>
                    </template>
                    <d-menu-item v-for="child in item.children" :key="`/doc/${item.path}/${child.path}`">
                        <template #icon>
                            <i class="icon-go-document"></i>
                            <span style="margin-left: 10px">{{child.meta.title}}</span>
                        </template>
                    </d-menu-item>
                </d-sub-menu>
                <d-menu-item v-else :key="`/doc/${item.path}`">
                    <template #icon>
                        <i class="icon-go-document"></i>
                    </template>
                    &nbsp;&nbsp;{{item.meta.title}}
                </d-menu-item>
            </template>                              
        </d-menu>
    </d-aside>
</template>

<script lang="ts" setup>
import {ComponentInternalInstance, getCurrentInstance, reactive, ref, nextTick} from 'vue';
import { useDocRouterTree } from '@/router/generateDocRouter';
import { useRoute, useRouter } from 'vue-router';
const routes = useRoute();
const router = useRouter();
const docTree = useDocRouterTree().children;
const select = reactive([routes.fullPath]);
const show = ref(true);
router.beforeEach((to)=>{
    show.value = false;
    select[0] = to.path;
    nextTick(()=>{
        show.value = true;
    })
})
</script>